<template>
	<view class="classList">
		<view class="loadingHeigth" v-if="!classList.length && !noGetData">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="content">
			<navigator :url="'/pages/preview/preview?_id=' + item._id" v-for="item in classList" :key="item._id" class="item">
				<image @click="onImage" :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
		<view class="loadingHeigth" v-if="classList.length || noGetData">
			<uni-load-more :status="noGetData ? 'noMore' : 'loading'"></uni-load-more>
		</view>
		<!-- 底部安全区域 -->
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {onLoad,onReachBottom,onShareAppMessage,onShareTimeline,onUnload} from '@dcloudio/uni-app'
	import {getWallListApi,userWallListApi} from '@/api/apis.js'
	import { usePreviewStore } from '@/store/preview.js'
	import {gotoHone} from '@/utils/common.js'
	onUnload(()=>{
		previewStore.setClassList([])
	})
	//点击图片时候把数据放到pinia
	const onImage = ()=>{
		previewStore.setClassList(classList.value)
	}
	onShareAppMessage(e => {
		return {
			title: "好看的壁纸推荐",
			path:'/pages/classList/classList?_id='+queryParams.classid+'&name='+name.value
		}
	})
	onShareTimeline(() => {
		return{
			title:"好看的壁纸推荐",
		}
	})
	//获取传入的_id
	const queryParams = {
		classid:"",
		pageNum:1,
		pageSize:12
	}
	const name = ref()
	const type = ref('')
	onLoad(e => {
		if(!e._id && !e.type){
			gotoHone()
		}
		queryParams.classid = e._id
		name.value = e.name
		uni.setNavigationBarTitle({
			title:name.value || '分类列表'
		})
		type.value = e.type
		getWallList(e.type)
	})
	//获取分类列表数据
	const classList = ref([])
	const noGetData = ref(false)
	const previewStore = usePreviewStore()
	const getWallList = async (type) => {
		let res = {}
		if(type){
			res = await userWallListApi({
				type,
				pageNum:queryParams.pageNum,
				pageSize:12
			})
		}else{
			res = await getWallListApi(queryParams)
		}
		classList.value = [...classList.value, ...res]
		if(res.length<queryParams.pageSize){
			noGetData.value = true
		}
	}
	//触底加载
	onReachBottom(() => {
		if(noGetData.value) return
		queryParams.pageNum++
		getWallList(type.value)
	})
</script>

<style lang="scss" scoped>
.classList{

	.content{
		display: grid;
		padding: 5rpx;
		grid-template-columns: repeat(3, 1fr);
		gap: 5rpx;
		.item{
			height: 440rpx;
			image{
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}
}
</style>
